<template>
    <div>
        <a-modal
            title="选择申报材料"
            :visible="visible"
            @ok="handleOk"
            @cancel="visible = false"
            :width="1000"
            :dialogStyle="{top:'20px'}"
        >
            <a-spin tip="正在加载中..." :spinning="spinning">
                <div class="process-handling-card">
                    <a-tabs type="card" v-model:activeKey="activeKey" @change="tabPaneChange" v-if="currentList.length">
                        <a-tab-pane v-for="(item,index) in currentList" :key="index" :tab="item.fslbh"></a-tab-pane>
                        <!-- +'--'+item.fsxmc -->
                    </a-tabs>
                </div>
                <div style="height: calc(100vh - 248px);overflow-y: auto;" class="directory-table-content">
                    <table border bordercolor="#d9d9d9" style="width: 100%; " :key="tableKey" >
                        <tr>
                            <th>材料目录</th>
                            <th>接收前提交的材料</th>
                            <th style="min-width: 135px;">中心发起补充材料</th>
                            <!-- <th v-if="!currentRow.isDisabled">操作</th> -->
                        </tr>
                        <tr v-for="(item,index) in directoryList" :key="index" class="file-list-v-examination">
                            <td style="width: 15%;padding: 3px;">{{ item.ml.fmlmc }}</td>
                            <td >
                                <div class="file-for-box">
                                    <div class="file-for-v" v-for="(trem,tIndex) in item.wjList" :key="tIndex" v-if="trem.fcljsqh == '0'">
                                        <div class="file-icon-box" :key="isCheckedKey">
                                            <!-- <div class="left-box"></div> -->
                                            <!-- <a-icon class="file-icon-v" type="file-pdf" /> -->
                                            <a-checkbox v-if="trem.isChecked" :checked="true"  @change="wjListOnChange($event,trem,item,index)"></a-checkbox>
                                            <a-checkbox v-else :checked="false"  @change="wjListOnChange($event,trem,item,index)"></a-checkbox>
                                            <div class="right-box" style="justify-content: flex-start;margin-left: 15px;" >
                                                <span
                                                style="
                                                padding: 0 3px;
                                                color: #fff;
                                                background: #18d118;
                                                border-radius: 3px;
                                                "
                                                :style="{background:trem.fydzt=='已读'?'#18d118':'red'}">{{ trem.fydzt }}</span>
                                                <a-icon class="eye-icon-v" style="padding-left: 15px;" ype="eye" @click="viewClick(trem)" v-if="trem.fclmc.indexOf('.pdf') !== -1"/>
                                            </div>
                                        </div>
                                        <a @click="downloadClick(trem)" class="name-fclmc-text">{{ trem.fclmc }}</a>
                                    </div>
                                </div>
                            </td>
                            <td >
                                <div class="file-for-box">
                                    <div class="file-for-v" v-for="(trem,tIndex) in item.wjList" :key="tIndex" v-if="trem.fcljsqh == '1'">
                                        <div class="file-icon-box" :key="isCheckedKey">
                                            <!-- <div class="left-box"></div> -->
                                            <!-- <a-icon class="file-icon-v" type="file-pdf" /> -->
                                            <a-checkbox v-if="trem.isChecked" :checked="true"  @change="wjListOnChange($event,trem,item,index)"></a-checkbox>
                                            <a-checkbox v-else :checked="false"  @change="wjListOnChange($event,trem,item,index)"></a-checkbox>
                                            <div class="right-box" style="justify-content: flex-start;margin-left: 15px;">
                                                <span
                                                style="
                                                padding: 0 3px;
                                                color: #fff;
                                                background: #18d118;
                                                border-radius: 3px;
                                                "
                                                :style="{background:trem.fydzt=='已读'?'#18d118':'red'}">{{ trem.fydzt }}</span>
                                                <a-icon class="eye-icon-v" style="padding-left: 15px;" type="eye" @click="viewClick(trem)" v-if="trem.fclmc.indexOf('.pdf') !== -1"/>
                                            </div>
                                        </div>
                                        <a @click="downloadClick(trem)" class="name-fclmc-text">{{ trem.fclmc }}</a>
                                    </div>
                                </div>
                            </td>
                        </tr>
                    </table>
                </div>
            </a-spin>
        </a-modal>
    </div>
</template>
<script>
import { 
    spcyqueryQyWjclml,
    spcydownloadQysqclFile,
    spcyselectHbkckcl,
    spcydownloadQysqclById,
    hbjcqueryHbzsxList,
} from './service/index'
import YchConstant from "@/api/YchConstant";
 import blobType from '@/common/blobType'
export default {
    components:{

    },
    props:{

    },
    data(){
        return{
            visible:false,
            directoryList:[],
            tableKey:null,
            spinning:false,
            currentSelect:[],
            isCheckedKey:null,
            currentList:[],
            multipleTaskPromptsKey:null,
            currentTabData:{},
            activeKey:0,
        }
    },
    watch:{

    },
    mounted(){
        
    },
    methods:{
        getData(row,currentSelect){
            this.currentRow = row
            this.currentSelect = currentSelect?currentSelect:[]
            this.spinning = true
            hbjcqueryHbzsxList({sqsxid:row.sqsxid}).then(res=>{
                if(res.code == 200){
                    //console.log(res.result.records)
                    this.currentList = res.result.records
                    this.currentTabData = this.currentList[0]
                    this.getFileData(this.currentTabData)
                }
                this.multipleTaskPromptsKey = Date.now()
            })
            
        },
        tabPaneChange(){
            this.getFileData(this.currentList[this.activeKey])
        },
        getFileData(row){
            spcyqueryQyWjclml({sqsxid:row.id}).then(res=>{
                if(res.code == 200){
                    let data = []
                    res.result.forEach((item,index) => {
                        data.push({
                            ...item,
                            wjList:res.result[index].wjList.map(trem=>{return {...trem,isChecked:this.currentSelect.indexOf(trem.id) !== -1?true:false}})
                        })
                    });
                    this.directoryList = data
                    //console.log(this.directoryList)
                    this.isCheckedKey = Date.now()
                    this.$forceUpdate()
                }else{
                    this.directoryList = []
                }
                if(!row.noFirstLoad){
                    this.tableKey = Date.now()
                }
                
                this.spinning = false
            })
        },
        wjListOnChange(val,trem){
            if(this.currentSelect.indexOf(trem.id) !== -1){
                this.currentSelect.splice(this.currentSelect.indexOf(trem.id),1)
            }else{
                this.currentSelect.push(trem.id)
            }
            this.getFileData(this.currentList[this.activeKey])
        },
        viewClick(trem){
            //console.log(trem)
            window.open(
                bootConfig[process.env.NODE_ENV].locality_ApI+YchConstant.SPZX_SPCY+'/spcy/downloadQysqclFile?id='+trem.id
            )
            this.getData({...this.currentRow,noFirstLoad:true},this.currentSelect)
        },
        downloadClick(trem){
            //console.log(trem)
            let fwjlx = trem.fclmc.slice(trem.fclmc.lastIndexOf('.'))
            var that = this
            this.DownloadTemplateLoading = true
            var fileName = trem.fclmc
            let param = { id:trem.id}
            
            spcydownloadQysqclById(param).then((data) => {
                this.DownloadTemplateLoading = false
                if (!data) {
                    that.$message.warning('文件下载失败')
                    return
                }
                    let index = blobType.suffix.indexOf(fwjlx)
                    let url = window.URL.createObjectURL(new Blob([data], { type:blobType.type[index] }))
                    let link = document.createElement('a')
                    link.style.display = 'none'
                    link.href = url
                    link.setAttribute('download', fileName)
                    document.body.appendChild(link)
                    link.click()
                    document.body.removeChild(link) //下载完成移除元素
                    window.URL.revokeObjectURL(url) //释放掉blob对象
                    this.getData({...this.currentRow,noFirstLoad:true},this.currentSelect)
                // }
            })
        },
        handleOk(){
            spcyselectHbkckcl({ ids:this.currentSelect.join(','),sqsxid:this.currentRow.sqsxid}).then(res=>{
                if(res.code == 200){
                    this.$message.success(res.message)
                    this.$emit('selectApplicationFileSuccess',this.currentSelect,this.currentRow)
                    this.visible = false
                }else{
                    this.$message.warning(res.message)
                }
            })
        },
    }
}
</script>
<style lang="less">
.directory-table-content{
    padding: 5px;
    border: 1px solid #38f;
    border-top: none;
    th{
        padding: 10px;
        text-align: center;
    }
    .file-list-v-examination{
        .file-for-box{
            display: flex;
            flex-wrap: wrap;
        }
        .file-for-v{
            border-radius: 2px;
            border: 1px solid #d9d9d9;
            min-width: 120px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            padding: 5px;
            margin: 5px;
            .ant-checkbox-inner{
                width: 20px;
                height: 20px;
            }
            .file-icon-box{
                display: flex;
                justify-content: space-between;
                .file-icon-v{
                    font-size: 42px;
                    color: rgb(24, 144, 255);
                    padding: 7px;
                }
                // .left-box{
                //     width: 28px;
                // }
                .right-box{
                    flex: 1;
                    display: flex;
                    // flex-direction: column;
                    justify-content: center;
                    align-items: center;
                    padding-bottom: 2px;
                    .eye-icon-v{
                        padding-left: 30px;
                        font-size: 18px;
                        color: rgb(24, 144, 255);
                    }
                }
            }
            
            .name-fclmc-text{
                // height: 60px;
                text-align: center;
                display:block;
                text-overflow: -o-ellipsis-lastline;
                overflow: hidden;
                text-overflow: ellipsis;
                display: -webkit-box;
                // display: flex;
                // flex-direction: column;
                // justify-content: center;
                -webkit-line-clamp: 3;
                line-clamp: 3;
                -webkit-box-orient: vertical;
                font-size: 14px;
            }
        }
        
    }
}

</style>